<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>迷宫</title>
	<style>
		html {
			width: 100vw;
			height: 100vh;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			background: rgb(117, 117, 116);
		}

		.choose {
			width: 40vw;
			padding: 0 6px;
			height: 40vh;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: #fff;
			z-index: 999;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
		}

		.choose .row {
			display: flex;
			padding-top: 10px;
			justify-content: space-around;
		}

		.choose .row input {
			position: relative;
			top: 10px;
			transform: scale(1.5);
		}

		.choose label {
			font-size: 24px;
		}

		.choose button {
			width: 100px;
			height: 50px;
			padding: 5px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -20%);
			font-size: 24px;
			border-radius: 6px;
		}

		.choose button:hover {
			color: white;
			background-color: black;
		}

		.container {
			opacity: 0;
			width: 100vw;
			height: 100%;
			max-width: 600px;
			max-height: 600px;
			min-width: 300px;
			min-height: 300px;
			transform: translateY(10%);
			margin: 0 auto;
			background: cornflowerblue;
		}

		.timer{
			height: 20px;
			line-height: 20px;
			position: absolute;
			top: -21px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 20px;
			color: #f65f27;
			background-color: #a4eef0;
			font-weight: 600;
		}

		ul {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			list-style: none;
		}

		.current {
			/* 保持宽高比缩放到适合背景区域的最大大小 contain */
			transition: background .8s ease-in-out;
			background: url("./in.png") center/contain no-repeat;
		}

		.exit {
			transition: background .8s ease-in-out;
			background: url("./out.png") center/contain no-repeat;
		}

		.tips{
			width: 50px;
			height: 100px;
			background: rgb(168, 168, 168);
			position: relative;
			left: 0;
			border: 0;
		}
		.rect{
			position: absolute;
			top: 60px;
			display: flex;
			width: 100%;
			border: 0;
		}
		.left,.right,.mid{
			flex: 1;
			text-align: center;
		}
		.left{
			background: rgb(209, 145, 100);
			line-height: 32px;
		}
		.right{
			background: rgb(159, 108, 209);
			line-height: 32px;
		}
		.top{
			background: rgb(236, 162, 162);
		}
		.bottom{
			background: rgb(95, 221, 204);
		}
	</style>
</head>

<body>
	<div class="choose">
		<div class="row">
			<label for="easy">简单</label>
			<input type="radio" name="difficult" id="easy">
			<label for="normal">正常</label>
			<input type="radio" name="difficult" id="normal" checked="true">
			<label for="hard">困难</label>
			<input type="radio" name="difficult" id="hard">
		</div>
		<button onclick="startGame()">开始</button>
	</div>
	<div class="container">
		<div class="timer">剩余时间：<span></span>秒</div>
		<ul></ul>
	</div>
	<div class="tips">
		<h5>触屏操作说明</h5>
		<div class="rect">
			<div class="left">←</div>
			<div class="mid"><div class="top">↑</div><div class="bottom">↓</div></div>
			<div class="right">→</div>
		</div>
	</div>
	<script src="maze.js"></script>
</body>

</html>